import React from 'react';
import { useEffect, useState } from "react"
import { useCtx } from "@sker/sdk"
import { useResizeDetector } from 'react-resize-detector';
export const NgerCaptcha: React.FC<{ className?: string, onChange: (val: string) => void }> = ({ className, onChange }) => {
    const { width, height, ref } = useResizeDetector();
    const [svg, setSvg] = useState<any>()
    const sdk = useCtx();
    const refresh = () => {
        sdk.captcha(width, height).then(res => {
            setSvg(res.data)
            onChange(res.hashkey)
        })
    }
    useEffect(() => {
        if (!width) return;
        if (!height) return;
        refresh();
    }, [width, height])
    return <div onClick={e => refresh()} ref={ref} className={className} dangerouslySetInnerHTML={{ __html: svg }}></div>
}
